<template>
  <app-picker 
    :visible.sync="visible"
     :block="block"
      v-slot="{label:codeName}"
       v-model="picker" 
       :columns="columns" 
       v-bind="$attrs"
       v-on="$listeners"
       >
    <vant-field
      readonly
      clickable
      :value="formatLabel(codeName)"
      :label="label"
      :showToolbar="false"
      placeholder="请选择"
      @click="visible=true"
      :rules="rules"
      :inputAlign="inputAlign"
      :right-icon="rightIcon"
    />
    
  </app-picker>
</template>

<script>
  export default {
    props: {
      value: {
        type: [String],
        default: ""
      },
      columns: {
        type: Array,
        required: true
      },
      label: {
        type: String,
        required: ''
      },
      rules: {
        type: [Array]
      },
      block: {
        type: Boolean,
        default: true
      },
      rightIcon: {
        type: String,
        default: 'arrow'
      },
      inputAlign:{
        type: String,
        default: ''
      },
      formatLabel:{
        type: Function,
        default(v){
          return v
        }
      },
    },
    data(){
      return {
        checked:false,
        picker:'',
        visible:false,
        val:[]
      }
    },
    watch: {
      value:{
          immediate:true,
          handler(v){
           const val = !v?[]: v.includes(',')?v.split(','):v;
          this.val=val;
        }
      },
      val(v) {
        const val=v.join(',')
        this.$emit('input',val)
      }
    }
    
  }
</script>

<style lang="less" scoped>

</style>